<template>
    <div>
<van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  fixed
/>
<div style="width: 380px;height: 50px;"></div>
<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
  @search="onSearch"
/>
<van-tabs v-model:active="active">
  <van-tab title="标签 1">
    <van-image
  width="380"
  height="300"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="height: 300px;width: 370px;"/>
  </van-swipe-item>
</van-swipe>
  </van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
<van-count-down :time="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template>
</van-count-down>
<van-grid>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
</van-grid>
<div class="box">
<div class="ba">
     <van-image
  width="80"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div class="ba">
     <van-image
  width="80"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div class="ba">
     <van-image
  width="80"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div class="ba">
     <van-image
  width="80"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
</div>
<div class="box">
<div class="ba">
     <van-image
  width="80"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div class="ba">
     <van-image
  width="80"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div class="ba">
     <van-image
  width="80"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div class="ba">
     <van-image
  width="80"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
</div>
<div style="width: 380px;height: 70px;"></div>
    </div>
</template>

<script setup>
 const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
    import router from '@/router';
    const onSearch=()=>{
        router.push('/ss')
    }
    import { ref } from 'vue';
    const time = ref(30 * 60 * 60 * 1000);
    import { catitemsApi } from '@/api/apu';
    let catitemsApiData=ref([])
    catitemsApi().then(res=>{
        catitemsApiData.value=res.data.message
        console.log(res);
        
    })
</script>

<style scoped>
.box{
     height: 100px;width: 360px;
    .ba{
        height: 100px;width: 80px;
        margin: 5px;
        float: left;
    }
}
 .colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
  }
</style>